// 需引入jquery

// 给元素添加具体样式
// 声明$style方法
// $sty代表sty属性的值
// $ys代表应该添加的原生的样式
function $style($sty, $ys, val) {
  // 获取带有$sty属性值的标签并循环
  $('[sty*=' + $sty + ']').each(function () {
    // console.log($(this))
    // 判断当前元素的style属性是否定义
    // 定义的情况
    if ($(this).attr('style') != undefined) {
      // console.log($(this)
      //   .attr('style').split(';'))
      // 将当前元素的style属性转化为数组
      let arr = $(this)
        .attr('style')
        .split(';')
      // 判断当前元素的style中是否有本次添加的样式
      if (arr.indexOf($ys + ':' + val + 'px') == -1) {
        // 没有就添加
        $(this).attr('style', $(this).attr('style') + $ys + ':' + val + 'px;')
      }
    }
    // 未定义的情况
    if ($(this).attr('style') == undefined) {
      // 直接添加
      $(this).attr('style', $ys + ':' + val + 'px;')
    }
  })
}
// 设置快捷样式
// 例：$css("wi", "width") "wi"是可以自定义的快捷样式，"width"是快捷样式完整的意思。如想自行修改，按格式接着写即可。

// 获取所有带有sty属性的标签并循环
$Element = $("[sty]").each(function () {
  // 将获取到的标签的sty属性值转化为数组
  $sty = $.trim($(this).attr("sty")).split(" ");
  console.log($sty)

  // 声明$css方法
  // $jx代表简写的样式
  // $ys代表原生的样式
  function $css($jx, $ys) {
    // 判断sty属性值中的jx样式是否被定义过
    if (jx == $jx) {
      // 匹配成功后调用$style方法
      $style($sty[i], $ys, val);
    }
  }

  // 声明一个空字符串sty
  let sty = ""
  // 循环$sty
  for (i = 0; i < $sty.length; i++) {
    // 将$sty的值拼接成sty属性值
    sty += $sty[i]
    // console.log(sty)
    // 取$sty前两位作为简写样式
    var jx = $sty[i].substr(0, 2);
    // 取$sty剩下的所有作为简写样式的值
    var val = $sty[i].substr(2, $sty[i].length - 2);
    // 调用$css方法
    $css("wi", "width");
    $css("hi", "height");
    $css("lh", "line-height");
    $css("fs", "font-size");
    $css("pt", "padding-top");
    $css("pr", "padding-right");
    $css("pb", "padding-bottom");
    $css("pl", "padding-left");
    $css("mt", "margin-top");
    $css("mr", "margin-right");
    $css("mb", "margin-bottom");
    $css("ml", "margin-left");
    $css("tp", "top");
    $css("rt", "right");
    $css("bm", "bottom");
    $css("lt", "left");
  }
  // 将整理好的sty属性值重新赋给sty属性
  $(this).attr("sty", sty)
});

// tab切换
// $(".details-content-ul li").on("click", function () {
//   $(this).addClass("active").siblings().removeClass("active");
//   $(".details-content-contentBox .box").eq($(this).index()).show().siblings().hide();
// });